<template>
	<view class="content">
		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/ds.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/ds.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#FFFFFF" size="20"></uv-icon>
							</view>
							<view class="font-size-32 color-FFF font-weight-500">
								我的导师
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">
			</view>
			<view class="padding-about-24">
				<view class="view item-view" style="margin-top: 200rpx;">
					<view v-for="item,index in array" :key="index"
						class="display-flex flex-direction-column align-items center">
						<image :src="imgaeUrl(`/static/home/${index + 1}.png`)" style="width: 100rpx;height: 100rpx;"
							class="border-radius" mode=""></image>
						<view class="font-size-24 margin-top-10 color-666">
							{{item}}
						</view>
					</view>
				</view>
				<view class="view margin-top-20 position-relative">
					<view style="width: 372rpx;height: 60rpx; top: 0;left: 50%;"
						class="position-absolute transform-translate-left display-flex center align-items">
						<image class="position-absolute" :src="imgaeUrl('/static/home/join-title.png')"
							style="width: 372rpx;height: 60rpx;" mode=""></image>
						<view style="z-index: 999;" class="font-size-28 color-FFF font-weight-500">
							专属导师微信
						</view>
					</view>
					<view class="margin-top-80  font-size-24" style="color: #FE821C;">
						基础操作、邀粉技巧、分享赚钱等问题都可以
					</view>
					<view class="display-flex space-between align-items margin-top-20"
						style="background: #FDF7EB;border-radius: 16rpx;padding: 24rpx;">
						<view class="display-flex align-items">
							<image :src="info.headImg" style="width: 92rpx;height: 92rpx;" class="border-radius"
								mode=""></image>
							<view class="margin-left-20">
								<view class="font-size-28 font-weight-500">
									{{info.nickname}}
								</view>
								<view class="font-size-24 color-666">
									{{info.wx_account}}
								</view>
							</view>
						</view>
						<view @click="setClipboardData(info.wx_account)" class="button color-FFF font-size-24 font-weight-500 display-flex center align-items">
							复制
						</view>
					</view>
				</view>
				<view class="view margin-top-20 position-relative">
					<view style="width: 372rpx;height: 60rpx; top: 0;left: 50%;"
						class="position-absolute transform-translate-left display-flex center align-items">
						<image class="position-absolute" :src="imgaeUrl('/static/home/join-title.png')"
							style="width: 372rpx;height: 60rpx;" mode=""></image>
						<view style="z-index: 999;" class="font-size-28 color-FFF font-weight-500">
							关注公众号
						</view>
					</view>
					<view class="display-flex center">
						<image :src="info.qrcode" :show-menu-by-longpress="true" style="width: 300rpx;height:300rpx;" class="margin-top-80" mode="">
						</image>
					</view>
					<view class="margin-top-30  font-size-24 text-center" style="color: #7C7C7C;">
						关注公众号随时关注订单动态及佣金变化
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		setClipboardData
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	let array = ['省钱30%方法', '领取免单福利', '漏洞神单福利', '快速提现方法', '邀请粉丝技巧', '分享好货赚钱']
	const info = ref({})
	onLoad(function(option) {
		tutor()
	});
	onShow(function() {});
	async function tutor() {
		const {
			code,
			data
		} = await api.tutor()
		if (code == 0) {
			info.value = data
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.button {
		width: 172rpx;
		height: 60rpx;
		background: #FE821C;
		border-radius: 30rpx;
	}

	.item-view {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx 10rpx;
	}

	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.backGround {
		width: 750rpx;
		height: 500rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}

	.content {
		min-height: 100vh;
		background: #FF6A09;
	}
</style>